<template>
    <div id="app">
        <h1>欢迎留言大厅</h1>
        <div>
            <label>用户名：</label>
            <br />
            <!-- .trim去除内容中的空格 -->
            <!-- v-model绑定表单的(uname)值 -->
            <input type="text" placeholder="用户名" v-model.trim="uname" />
            <br />
            <label>留言内容：</label>
            <br />
            <textarea rows="2" cols="23" placeholder="吐槽内容" v-model.trim="tarea"></textarea>
            <br />
            <!-- @click="",设置点击事件 -->
            <button class="send" @click="sendCont()">发表</button>
            <hr />
            <h3>留言内容：</h3>
            <!-- 遍历list数据 -->
            <div class="cont" v-for="val in list" :key="val.name">
                <div>
                    <p>{{ val.name }}</p>
                    <span>说:</span>
                    <p>{{ val.item }}</p>
                    <p class="del" @click="delCont(val)">删除</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [
                { "name": "beibei", "item": "妈妈,我想吃烤红薯" },
                { "name": "dian", "item": "吃,吃大块的" },
            ],
            uname: "",
            tarea: "",
        }
    },
    methods: {
        sendCont(){
            // 创建一项清单
      var item = {name:this.uname,item:this.tarea};
      // 在list的前面添加item
      this.list.unshift(item);
      // 用户框，内容框清空
      this.uname="";
      this.tarea="";
        },
        delCont(val){
            alert("确定删除？");
      // 查找val在list下标
      // value遍历的元素 当value的item/name值等于val的item/name值
      var ind = this.list.findIndex(value=>value.item===val.item);
      // 删除list第ind个
      this.list.splice(ind,1);
        }
        
    },
}

    

</script>
